// 创建整个应用的路由器
import VueRouter from "vue-router";
import VuexExample from '../pages/VuexExample.vue';
import Basics from '../components/basics/Basics.vue';
import RouterExample from '../pages/RouterExample'
import Home from '../components/routerDemo/Home'
import About from '../components/routerDemo/About'
import Message from '../components/routerDemo/Message'

const router = new VueRouter({
    routes:[
        {
            name:'aboutPage',
            path:'/vuex',
            component:VuexExample,
            meta:{isAuth:false}//meta属性，可以存放 是否需要auth,简化路由守卫的if判断...
        },
        {
            path:'/basics',
            component:Basics
        },
        {
            path:'/router',
            component:RouterExample,
            children:[
                {
                    path:'home',
                    component:Home
                },
                {
                    path:'about',
                    component:About,
                    children:[
                        {
                            name:"messagePage",
                            path:'message',
                            component:Message,
                            //object props
                            //props:{a:1,b:'hello'}

                            //boolean props,if ture, params will be porps in components
                            //props:true

                            //function props,
                            props($route){
                                return {id:$route.query.id,title:$route.query.title}
                            }
                        }
                    ]
                },
            ]
        },
        
    ]
})


//全局前置守卫
router.beforeEach((to,from,next)=>{
    /////some condition
    //if(to.meta.isAuth) .........code here.......
    next();    
})

//后置路由守卫
router.afterEach((to,from)=>{
    console.log(to,from);
})
export default router;